// page-scan {
//   html,
//   body,
//   ion-app,
//   ion-content,
//   ion-page,
//   .nav-decor {
//     background-color: transparent !important;
//   }
//   .line {
//     position: absolute;
//     z-index: 999999;
//     top: 15px;
//     height: 2px;
//     width: 100%;
//     background-color: #009900; //动画
//     animation: scan 1s infinite alternate;
//     -webkit-animation: scan 1s infinite alternate;
//   }
//   @keyframes scan {
//     from {
//       top: 0%;
//     }
//     to {
//       top: 100%;
//     }
//   }
// }
// page-scan {
//   .qrscanner {
//       background: none;
//       &-area {
//         width: 100%;
//         height: 86%;
//         background: url(../assets/imgs/scanner.svg) no-repeat center center;
//         background-size: contain;
//       }
//     }
//     .through-line {
//       left: 25%;
//       width: 50%;
//       height: 2px;
//       background: red;
//       position: absolute;
//       animation: myfirst 2s linear infinite alternate;
//     }
//     @keyframes myfirst {
//       0% {
//         background: red;
//         top: 30%;
//       }
//       25% {
//         background: yellow;
//         top: 35%;
//       }
//       50% {
//         background: blue;
//         top: 40%;
//       }
//       75% {
//         background: green;
//         top: 45%;
//       }
//       100% {
//         background: red;
//         top: 50%;
//       }
//     }
//     .button-bottom {
//       width: 128px;
//       position: absolute;
//       left: 50%;
//       bottom: 80px;
//       margin-left: -64px;
//       .icon-camera {
//         float: left;
//       }
//   }
//   }


page-scan {
  html,
  body,
  ion-app,
  ion-content,
  ion-page,
  .nav-decor {
    background-color: transparent !important;
  }
    .qrscanner {
      background: none;
      &-area {
        width: 100%;
        height: 86%;
        background: url(assets/img/kuangkuang@2x.png) no-repeat center center;
        background-size: contain;
      }
    }
  
  .scannerBox {
    width: 100%;
    height: 100%;
    padding-top: 10rem;
    background-color: transparent !important;
  }
  .toolbar-title, .toolbar-background {
    background-color: #333 !important;
    color: #fff;
  }
  .back-button,.back-button-icon,.back-button-ios{
    color:#fff;
  }
  .scannerImg {
    position: relative;
    width: 20rem;
    height: 20rem;
    margin: 0 auto;
     // margin-top:10rem;
    // margin-top: 10rem;
  }
  .line {
    position: absolute;
    z-index: 999999;
    margin-top: -5.5rem;
    height: 7rem;
    width: 100%; // background-color: #009900; //动画
    animation: scan 1s infinite alternate;
    -webkit-animation: scan 1s infinite alternate;
  }
  @keyframes scan {
    from {
      top: 0;
    }
    to {
      top: 100%;
    }
  }
  .showWriteCode {
    width: 100%;
    height: 100%;
    // height: 80%;
    background-color: #eaeaea !important;
  }
  .chioceScan {
    width: 100%; // height:19rem;
    background-color: #333;
    color: #fff;
    position: fixed;
    // bottom: 4.5rem;
    bottom:0;
    padding-top: 1rem;
  }
  ion-col {
    text-align: center !important;
  }

  /**使用劵码确认样式 */
  .inputImg{
    width: 7rem;
    height: 7rem;
    margin:0 auto;
  }
  .searchBar{
    width: 24rem;
    height: 4.5rem;
    background-color: #fff;
    margin:0 auto;
    margin-top: 3rem;
  }
  .searchbar-search-icon{
    display:none;
  }
  .searchbar-ios{
    background-color:#fff !important;
    border-bottom:none;
    top: 0.5rem;
  }
  .toolbar-ios-button{
    color:#fff;
  } 


}